<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Expires" content="0"/>
	<meta http-equiv="Cache-Control" content="no-cache, no-store"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<title>百度地图</title>
	<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
	<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
		String projectPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
	%>
	<%--项目路径 --%>
	<c:set var="basePath" value="<%=projectPath%>"></c:set>
	<c:set var="ctx" value="${pageContext.request.contextPath}"/>
	<link rel="stylesheet" href="${ctx}/map/css/gh-buttons.css">
	<script type="text/javascript" src="${ctx}/map/js/public/util.js"></script>
	<style>
		body, html, #allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0 auto;
		}

		.datatable {
			font-size: 12px;
			display: none;
		}

		.button {

		}

		.maptable td {
			border: 0px;
			padding: 2px;
			color: #0099FF;
			font-size: 13px;
		}

		.tdheader {
			text-align: right;
			color: #000000 !important;
		}

		.BMap_cpyCtrl {
			display: none;
		}

		.anchorBL {
			display: none;
		}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GT3YSZNuqHkwbGyAY4maPaVw"></script>
	<!--测距-->
	<script type="text/javascript" src="${ctx}/map/DistanceTool_min.js"></script>
	<!--拉框放大-->
	<script type="text/javascript" src="${ctx}/map/RectangleZoom_min.js"></script>
	<script type="text/javascript" src="${ctx}/map/DrawingManager_min.js"></script>
	<!--转换基于GPS坐标或谷歌坐标的marker为基于百度坐标的marker-->
	<script type="text/javascript" src="${ctx}/map/MapWrapper.min.js"></script>
</head>
<body>
<div style="position: absolute; right: 1px; top: 1px; z-index: 1">
	<ul class="button-group">
		<li><a href="#" class="button" id="panelTool" title="拖动地图">
			<img src="${ctx}/map/images/toolbar/hand.gif"/></a></li>
		<li><a href="#" class="button" id="rectZoomoutTool" title="矩形缩小">
			<img src="${ctx}/map/images/toolbar/zoomout.gif"/></a></li>
		<li><a href="#" class="button" id="rectZoominTool" title="矩形放大">
			<img src="${ctx}/map/images/toolbar/zoomin.gif"/></a></li>
		<li><a href="#" class="button" id="measureTool" title="测距">
			<img src="${ctx}/map/images/toolbar/measure.png"/></a></li>
		<%--	<li><a href="#" class="button" id="rectQueryTool" title="矩形查设备">
				<img src="<%=mapPath%>/images/toolbar/rectQuery.png"/></a></li> --%>
		<li><a href="#" class="button" id="markerTool" title="标注">
			<img src="${ctx}/map/images/toolbar/marker.png"/></a></li>
		<li><a href="#" class="button" id="rectTool" title="矩形区域">
			<img src="${ctx}/map/images/toolbar/rect.png"/></a></li>
		<li><a href="#" class="button" id="circleTool" title="圆形区域">
			<img src="${ctx}/map/images/toolbar/circle.png"/></a></li>
		<li><a href="#" class="button" id="polygonTool" title="多边形区域">
			<img src="${ctx}/map/images/toolbar/polygon.png"/></a></li>
		<%--	<li><a href="#" class="button" id="polylineTool" title="线路">
			<img src="${ctx}/map/images/toolbar/polyline.png"/></a></li>
		<li><a href="#" class="button" id="keyPointTool" title="关键点">
				<img src="<%=mapPath%>/images/toolbar/keypoint.png"/></a></li> --%>
		<li><a href="#" class="button" id="saveTool" title="保存中心兴趣点">
			<img src="${ctx}/map/images/toolbar/point.png"/></a></li>
		<%--	<li><a href="#" class="button" id="showAllTool" title="显示所有设备">
			<img src="<%=mapPath%>/images/toolbar/showAll.png"/></a></li>   --%>
	</ul>
</div>
<div id="allmap">
</div>
<script type="text/javascript" src="${ctx}/js/jquery/jquery1.8.min.js"></script>
<script type="text/javascript" src="${ctx}/map/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="${ctx}/map/MarkerClusterer1.js"></script>
<script type="text/javascript" src="${ctx}/map/BaiduMapHandler.js?v=10"></script>
<link type="text/css" href="${ctx}/topjui/css/topjui.core.min.css" rel="stylesheet">
<link type="text/css" href="${ctx}/topjui/themes/default/topjui.bluelight.css" rel="stylesheet" id="dynamicTheme"/>
<!-- FontAwesome字体图标 -->
<link type="text/css" href="${ctx}/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<script type="text/javascript" src="${ctx}/static/public/js/topjui.config.js"></script>
<!-- TopJUI框架核心 -->
<script type="text/javascript" src="${ctx}/topjui/js/topjui.core.min.js"></script>
<!-- TopJUI中文支持 -->
<script type="text/javascript" src="${ctx}/topjui/js/locale/topjui.lang.zh_CN.js"></script>
<script type="text/javascript">
	var path = "${ctx}";
	var map = null;
	var OperatorObj = null;
	var mapTool = "queryRect"; //矩形工具，用来区分是矩形查询车辆，还是矩形区域画图 query和draw
	$(function () {
		// 百度地图API功能
		map = new BMap.Map("allmap");
		//当前登录用户信息
		var userInfo = window.parent.userInfo;//用户设置的地图中心
		if ((typeof(userInfo.longitude) == "undefined") || (typeof(userInfo.latitude) == "undefined") || userInfo.longitude == '' || userInfo.latitude == '') {
			map.centerAndZoom(new BMap.Point(119.924141, 32.468378), 10);
		} else {
			map.centerAndZoom(new BMap.Point(userInfo.longitude, userInfo.latitude), 10);
		}

		OperatorObj = new BaiduMapHandler(map, path + '/map');
		var sz = new BMap.Size(0, 30); //导航条向下偏移
		map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, offset: sz}));//添加默认缩放平移控件
		map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]}));//2D图，卫星图
		map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));//左上角，默认地图控件
		map.addControl(new BMap.OverviewMapControl());//添加默认缩略地图控件
		map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));// 左下
		map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用
		map.enableContinuousZoom();//启用地图惯性拖拽，默认禁用
		var myDis = new BMapLib.DistanceTool(map);
		map.addEventListener("load", function () {
			myDis.open();  //开启鼠标测距
//myDis.close();  //关闭鼠标测距大
		});
		var myZoomInDrag = new BMapLib.RectangleZoom(map, {
			followText: "拖拽鼠标进行矩形放大操作", zoomType: 0
		});
		var BMAP_ZOOM_OUT = 1;
		var myZoomoutDrag = new BMapLib.RectangleZoom(map, {
			followText: "拖拽鼠标进行矩形缩小操作",
			zoomType: BMAP_ZOOM_OUT
		});
		$("#measureTool").click(function () {
			reset();
			myDis.open();
		});
		$("#rectZoomoutTool").click(function () {
			reset();
			myZoomInDrag.close();
			myZoomoutDrag.zoomType = 1;
			myZoomoutDrag.open();  //开启拉框缩小
		});
		$("#rectZoominTool").click(function () {
			reset();
			myZoomoutDrag.close();
			myZoomInDrag.zoomType = 0;
			myZoomInDrag.open();  //开启拉框放大
		});
		function reset() {
			drawingManager.close();
			myDis.close();
			myZoomoutDrag.close();
			myZoomInDrag.close();
		}

		var styleOptions = {
			strokeColor: "red",    //边线颜色。
			fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight: 3,       //边线的宽度，以像素为单位。
			strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
			fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
			strokeStyle: 'solid' //边线的样式，solid或dashed。
		}
//实例化鼠标绘制工具
		var drawingManager = new BMapLib.DrawingManager(map, {
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: false, //是否显示工具栏
			drawingToolOptions: {
				anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
				offset: new BMap.Size(5, 5), //偏离值
				scale: 0.8 //工具栏缩放比例
			},
			circleOptions: styleOptions, //圆的样式
			polylineOptions: styleOptions, //线的样式
			polygonOptions: styleOptions, //多边形的样式
			rectangleOptions: styleOptions //矩形的样式
		});
//回调获得覆盖物信息e.overlay, e.drawingMode
		var overlaycomplete = function (e) {
//overlays.push(e.overlay);
			drawingManager.close();
			var strPoints = "";
			if (e.overlay.getPath) {
				var pointArray = e.overlay.getPath();
				var sep = "";
				for (var m = 0; m < pointArray.length; m++) {
					var pt = pointArray[m];
					if (pt != null) {
						strPoints += sep + pt.lng + "," + pt.lat;
						sep = ";";
					}
				}
			}
			var mapType = "baidu";//围栏的地图类型
			if (e.drawingMode == BMAP_DRAWING_MARKER) {
				//this.addMarker(e.overlay.getPosition().lng, e.overlay.getPosition().lat);
				//map.removeOverlay(e.overlay);
				strPoints = e.overlay.getPosition().lng + "," + e.overlay.getPosition().lat;
				if (mapTool == "keyPointTool") {
					//标注关键点
					var url = path + "/area/viewKeyPoint?id=0&enclosureType=circle&strRoutePoints=" + strPoints + "&radius=" + 100 + "&MapType=" + mapType;
					parent.openRouteWindow(url, 760, 370, "关键点编辑", function () {
						map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
					});
				}
				else if (mapTool == "markerTool") {
					//标注
					var url = path + "/area/viewMarker?id=0&enclosureType=marker&strRoutePoints=" + strPoints + "&radius=" + 100 + "&MapType=" + mapType;
					parent.openRouteWindow(url, 350, 210, "标注点编辑", function () {
						map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
					});
				}
			}
			else if (e.drawingMode == BMAP_DRAWING_CIRCLE) {
				//画圆形
				var radius = e.overlay.getRadius();
				strPoints = e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat;
				var url = path + "/area/viewArea?id=0&enclosureType=circle&strRoutePoints=" + strPoints + "&radius=" + radius + "&MapType=" + mapType;
				parent.openRouteWindow(url, 600, 250, "圆形区域编辑", function () {
					map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
				});
			}
			else if (e.drawingMode == BMAP_DRAWING_POLYGON) {
				//多边形
				var url = path + "/area/viewArea?id=0&enclosureType=polygon&strRoutePoints=" + strPoints + "&MapType=" + mapType;
				if (strPoints.length > 225) {
					alert('所画多边形围栏过复杂');
					map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
					return;
				}
				parent.openRouteWindow(url, 600, 250, "多边形区域编辑", function () {
					//关闭窗口时的回调函数
					map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
				});
			}
			else if (e.drawingMode == BMAP_DRAWING_RECTANGLE) {
				if (mapTool == "rectQueryTool") {
					//矩形查询车辆
					var url = path + "/Vehicle.mvc/viewVehicleInArea?enclosureType=rect&strRoutePoints=" + strPoints;
					parent.openRouteWindow(url, 720, 420, "区域查车", function () {
						//关闭窗口时的回调函数
						map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
					});
				}
				else {
					//画出矩形区域
					var url = path + "/area/viewArea?id=0&enclosureType=rect&strRoutePoints=" + strPoints + "&MapType=" + mapType;
					parent.openRouteWindow(url, 600, 250, "矩形区域编辑", function () {
						//关闭窗口时的回调函数
						map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
					});
				}
			}
//result += "</p>"
//$("showOverlayInfo").style.display = "none";
//$("panel").innerHTML += result; //将绘制的覆盖物信息结果输出到结果面板
		};
//添加鼠标绘制工具监听事件，用于获取绘制结果
		drawingManager.addEventListener('overlaycomplete', overlaycomplete);
		$("#rectTool").click(function () {
			reset();
			mapTool = this.id; //画矩形
			drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE) //画矩形
			drawingManager.open();
		});
		$("#rectQueryTool").click(function () {
			reset();
			mapTool = this.id; ///矩形查询车辆
			drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE) //画矩形
			drawingManager.open();
		});
		$("#polylineTool").click(function () {
			reset();
			mapTool = this.id;
			drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE) //画线路
			drawingManager.open();
		});
		$("#polygonTool").click(function () {
			reset();
			drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON) //画多边形
			drawingManager.open();
		});
		$("#circleTool").click(function () {
			reset();
			drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE) //画圆形
			drawingManager.open();
		});
//地图标注
		$("#markerTool").click(function () {
			reset();
			mapTool = this.id;
			drawingManager.setDrawingMode(BMAP_DRAWING_MARKER) //标注
			drawingManager.open();
		});
//地图标注
		$("#keyPointTool").click(function () {
			reset();
			mapTool = this.id;
			drawingManager.setDrawingMode(BMAP_DRAWING_MARKER) //标注
			drawingManager.open();
		});
//拖动地图
		$("#panelTool").click(function () {
			reset();
			mapTool = this.id;
			drawingManager.setDrawingMode("handler");
			drawingManager.close(); //关闭画的模式
		});
//拖动地图
		$("#routePlanTool").click(function () {
//$('#routePlanWindow').window('open');
			window.parent.openRoutePlanWindow();
		});
//保存地图兴趣点
		$("#saveTool").click(function () {
			reset();
			mapTool = this.id;
			drawingManager.setDrawingMode("handler");
			drawingManager.close(); //关闭画的模式
			var centerPoint = map.getCenter();
			var zoom = map.getZoom();
			var postData = {lat: centerPoint.lat, lng: centerPoint.lng};
			var url = path + "/user/setMapCenter";
			$.getJSON(url, postData, function (result) {
				//$.messager.alert("提示",result.message);
				//alert(result.message);
				$.iMessager.alert('提示', result.msg, 'messager-info');
			});
		});
//拖动地图
		$("#showAllTool").click(function () {
			reset();
			mapTool = this.id;
			drawingManager.setDrawingMode("handler");
			drawingManager.close(); //关闭画的模式
			var params = {};
			var roots = parent.$('#deviceTree').tree('getRoots');//返回tree的所有根节点数组
			for (var i = 0; i < roots.length; i++) {
				var node = parent.$('#deviceTree').tree('find', roots[i].id);//查找节点
				parent.$('#deviceTree').tree('check', node.target);//将得到的节点选中
			}
		});
		loadEnclosures();//加载电子围栏到地图上面
	});


	/**
	 * 根据数据库记录,创建标注,绑定点击事件，点击时，打开窗口，显示信息
	 */
	function createExtendMarker(lat, lng, radius, id, markerName) {
		OperatorObj.removeMapArea(id);
		var pt = new BMap.Point(lng, lat);
		var icon = path + "/map/images/track/marker.png";
		var myIcon = new BMap.Icon(icon, new BMap.Size(24, 24));
		var marker = new BMap.Marker(pt, {icon: myIcon});  // 创建标注
		map.addOverlay(marker);              // 将标注添加到地图中
		marker.addEventListener("click", function () {
			//关键点点击事件
			var url = path + "/area/viewMarker?id=" + id;
			parent.openRouteWindow(url, 350, 210, "地标设置");
		});

		var label = OperatorObj.createLabel(id, lat, lng, markerName);
		OperatorObj.cacheAreaOverlay(id, marker, label);
		return marker;
	}

	/**
	 * 创建围栏，并绑定点击事件
	 * @id 是数据库的围栏id
	 * @enclosureType, 类型：circle, rect,polygon三种
	 */
	function createExtendEnclosure(strPoints, radius, id, enclosureType, name, centerLat, centerLng) {
		OperatorObj.removeMapArea(id);
		if (!strPoints)
			return;
		var style = {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5};
		var points = stringToPoint(strPoints);
		var overlay = null;
		if (enclosureType == "circle") {
			var center = points[0];
			overlay = new BMap.Circle(center, radius, style);
			map.addOverlay(overlay);
		} else if (enclosureType == "rect") {
			overlay = new BMap.Polygon(points, style);
			map.addOverlay(overlay);
		} else if (enclosureType == "polygon") {
			overlay = new BMap.Polygon(points, style);
			map.addOverlay(overlay);
		}
		if (overlay != null) {
//绑定点击事件
			overlay.addEventListener("click", function () {
				var url = path + "/area/viewArea?id=" + id;
				parent.openRouteWindow(url, 600, 250, "区域设置");
			});

			var label = OperatorObj.createLabel(id, centerLat, centerLng, name);
			OperatorObj.cacheAreaOverlay(id, overlay, label);
		}
	}


	/**
	 * 将坐标字符串(格式:lng1,lat1;lng2;lat2....)，转换成百度坐标数组
	 */
	function stringToPoint(strPoints) {
		var points = new Array();
		var splits = strPoints.split(";");
		for (var i = 0; i < splits.length; i++) {
			var lngLat = splits[i].split(",");
			if (lngLat != "") {
				var lng = parseFloat(lngLat[0]);
				var lat = parseFloat(lngLat[1]);
				var bp = new BMap.Point(lng, lat);
				points.push(bp);
			}
		}
		return points;
	}


	function convertRecord(rd) {
		var dataInfo = {
			id: rd.id,
			text: rd.simNo,
			vehicleId: rd.id,
			rLat: rd.latitude,
			rLng: rd.longitude,
			tLat: rd.latitude,
			tLng: rd.longitude,
			status: rd.status,
			validate: rd.valid,
			direction: rd.direction,
			sendTime: rd.sendTime,
			angleInt: rd.direction,
			statusInt: 0,
			velocity: rd.velocity,
			warnTypeId: 0,
			online: rd.online
		};
		rd.orgLatitude = parseFloat(rd.orgLatitude).toFixed(6);
		rd.orgLongitude = parseFloat(rd.orgLongitude).toFixed(6);
		rd.gas = parseFloat(rd.gas).toFixed(1);
		rd.mileage = parseFloat(rd.mileage).toFixed(1);
		rd.velocity = parseFloat(rd.velocity).toFixed(1);
		dataInfo = $.extend(rd, dataInfo);
		return dataInfo;
	}


	//加载用户的围栏
	function loadEnclosures() {
		var params = {};
		$.getJSON(path + "/area/enclosureList", params,
				function (result) {
					if (result.success) {
						//逐一创建围栏
						$.each(result.data, function (i, item) {
									var overlay = null;
									var label = null;
									/*	if (item.EnclosureType == "route") {
									 createExtendPolyline(item.Points, item.EntityId, item.Name, item.CenterLat, item.CenterLng);
									 } else    */
									if (item.enclosureType == "marker") {
										createExtendMarker(item.centerLat, item.centerLng, item.radius, item.id, item.name);
									}
									/* else if (item.KeyPoint == 1) {
									 createExtendKeyPoint(item.CenterLat, item.CenterLng, item.Radius, item.EntityId, item.Name);
									 }*/
									else {
										createExtendEnclosure(item.points, item.radius, item.id, item.enclosureType, item.name, item.centerLat, item.centerLng);
										//}
										/*if (item.CenterLat > 0 && item.CenterLng > 0) {
										 //创建标签
										 //OperatorObj.createLabel(item.EntityId, item.centerLat, item.centerLng, item.name);
										 }*/
									}
								}
						);

					}
				}
		);


	}
</script>
</body>
</html>
